<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body{
        background-color: black;
    }
    .rua{
        font-size: large;

    }
    th{
        color:#FFF;
        text-align: center;
    }
    td{
        background-image: -webkit-linear-gradient(top,red,yellow);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
    }
    h1{
        background-image: -webkit-linear-gradient(top,red,orange,yellow,greenyellow,blue,deepskyblue,purple);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
    }
    .box{
        border-left:1px solid #FFF;
        border-right:1px solid #FFFFFF;
        border-top:1px solid #FFFFFF;
        border-block:1px solid #FFFFFF;
        width: 500px;
        text-align: center;
    }
    .box2{
        text-align: center;
    }
    a{
        background-image: -webkit-linear-gradient(top,#FFFFFF,yellow);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    button{
        background-color: #666;
    }
    td>tr{
        text-align: center;
    }
</style>
<body>
<div class="box rua">
    <h1>The Goods Page</h1>
    <form th:action="@{/goods/doFindByName}" method="get">
        <input type="text" name="name">
        <input type="submit" value="查询"></input>
        <input type="button" onclick="doLoadGoodsAddUI()" value="添加商品"></input>
    </form>
    <table>
        <div class="box">
        <thead>
        <tr>
            <th>id     </th>
            <th>name     </th>
            <th>remark     </th>
            <th>createdTime     </th>
        </tr>

        </thead>
        </div>
        <!--/* 定义表体部分 */-->
        <div class="box">
            <tbody>
            <!--/* th:each 为thymeleaf中定义的迭代标签属性,需要循环创建哪些元素,th:each就写到哪个元素内部 */-->
            <tr th:each="g:${list}"><!--/*这里的g表示集合中的一个元素,可以自己起名字*/-->
                <td th:text="${g.id}">1</td> <!--/*g.id是访问g指向对象的getId方法*/-->
                <td th:text="${g.name}">A</td>
                <td th:text="${g.remark}">A..</td>
                <td th:text="${#dates.format(g.createdTime, 'yyyy/MM/dd HH:mm')}">2020/12/30</td>
                <td ><button th:onclick="doDeleteById([[${g.id}]])"><a>delete</a></button></td>
                <td ><button th:onclick="doFindById([[${g.id}]])"><a>update</a></button></td>
            </tr>
            </tbody>
        </div>
    </table>
</div>
<script>
    var rootUrl="http://localhost"
    function doFindByName(name) {
        location.href=`/goods/doFindByName?name=${name}`;
    }
    function doDeleteById(id){
        //Get 请求
        location.href=`/goods/doDeleteById?id=${id}`;
    }
    function doFindById(id){
        //Get 请求
        location.href=`${rootUrl}/goods/doFindById/${id}`;
    }
    function doLoadGoodsAddUI() {
        location.href=`${rootUrl}/goods/doGoodsAddUI`;
    }
</script>
</body>
</html>
<!--
<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body{
        background-color: black;
    }
    .rua{
        font-size: large;

    }
    th{
        color:#FFF;
    }
    td{
        background-image: -webkit-linear-gradient(top,red,yellow);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    h1{
        background-image: -webkit-linear-gradient(top,red,orange,yellow,greenyellow,blue,deepskyblue,purple);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .box{
        border-left:1px solid #FFF;
        border-right:1px solid #FFFFFF;
        border-top:1px solid #FFFFFF;
        border-block:1px solid #FFFFFF;
        width: 500px;
    }
    .box2{
        text-align: center;
    }
</style>
<body>
<div class="box rua">
    <h1>The Goods Page</h1>
    <table>
        <div class="box">
            <thead>

            <tr>
                <th>id</th>
                <th>name</th>
                <th>remark</th>
                <th>createdTime</th>
            </tr>

            </thead>
        </div>
        &lt;!&ndash;/* 定义表体部分 */&ndash;&gt;
        <div class="box">
            <tbody>
            &lt;!&ndash;/* th:each 为同行业thymeleaf中定义的迭代标签属性，需要循环创建哪些元素，th:each就写到哪个元素 */&ndash;&gt;

            <tr th:each="g:${list}">
                <td th:text="${g.id}">1</td>
                <td th:text="${g.name}">A</td>
                <td th:text="${g.remark}">A</td>
                <td th:text="${#dates.format(g.createdTime,'yyyy-MM-dd HH:mm:ss')}">2077-1-1</td>
                <td><a th:href="@{doDelete(id=${g.id})}">删除</a></td>
                <td><a th:href="@{doFindById(id=${g.id})}">修改</a></td>
            </tr>
            <tr>

            </tr>
            </tbody>
        </div>
    </table>
    <div class="box2"> <a href="turn" target="rightFrame"><button>新增信息</button></a></div>
</div>
</body>
</html>
&#45;&#45;*/&ndash;&gt;
-->
